<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="角色管理" name="first">
        <el-button style="margin:20px; 0" size="mini" type="primary" @click="showDia('add')">+ 新增角色</el-button>
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="name" label="角色名" width="180" />
          <el-table-column prop="description" label="描述" />
          <el-table-column fixed="right" label="操作" width="280">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="setRights(row)">
                分配权限
              </el-button>
              <el-button type="text" size="small" @click="showDia('edit',row)">
                修改
              </el-button>
              <el-button type="text" size="small" @click="delRole(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          :current-page="queryObj.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryObj.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="公司信息" name="second">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="企业名称">
            <el-input v-model="form.name" :disabled="true" />
          </el-form-item>

          <el-form-item label="公司地址">
            <el-input v-model="form.companyAddress" :disabled="true" />
          </el-form-item>

          <el-form-item label="公司电话">
            <el-input v-model="form.companyPhone" :disabled="true" />
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input v-model="form.mailbox" :disabled="true" />
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-model="form.remarks" :disabled="true" />
          </el-form-item>

        </el-form>
      </el-tab-pane>
    </el-tabs>

    <!-- 对话框 添加角色 ==修改角色都是用同一个对话框
    <el-dialog :title="diaBox=='edit'?'编辑角色':'添加角色'" :visible.sync="dialogFormVisible" @close="close">
      <el-form :model="formAdd">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="formAdd.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="formAdd.description" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="roleHandle">确 定</el-button>
      </div>
    </el-dialog> -->
    <alerts
      :form-add.sync="formAdd"
      :dia-box="diaBox"
      :dialog-form-visible.sync="dialogFormVisible"
      @roleHandle="roleHandle"
    />

    <!-- 分配权限 -->
    <el-dialog v-if="dialogVisibleRight" :title="'为【'+title+'】分配权限'" :visible.sync="dialogVisibleRight" width="50%">
      <!-- 属性控件 -->
      <el-tree
        ref="tree"
        :data="data"
        default-expand-all
        show-checkbox
        node-key="id"
        check-strictly
        :default-checked-keys="defaultCheckedKeys"
        :props="defaultProps"
      />
      <!-- 属性控件 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleRight = false">取 消</el-button>
        <el-button type="primary" @click="assignRightsHandle">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  getCompanyInfo,
  getRoleList,
  addRole,
  deleteRole,
  updateRole,
  getRoleDetail,
  assignPerm

} from '@/api/setting'
import {
  getPermissionList
} from '@/api/permission'
import {
  TreeTool
} from '@/utils/TreeTools'

import alerts from './components/alert.vue'
export default {
  components: {
    alerts
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      form: {
        name: '',
        companyAddress: '',
        companyPhone: '',
        mailbox: '',
        remarks: ''
      },
      queryObj: {
        page: 1,
        pagesize: 10
      },
      total: 0,

      dialogFormVisible: false,
      formAdd: {
        name: '',
        description: ''
      },
      // formLabelWidth: '120px',
      diaBox: '',

      /* 分配权限 */
      dialogVisibleRight: false,
      title: '',
      /* 属性控件 */
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      rightObj: {
        type: 0,
        enVisible: 1
      },
      rightParamsObj: {
        id: '',
        permIds: []
      },
      defaultCheckedKeys: []// 当前所拥有的的权限
    }
  },
  created() {
    this.getCompany()
    this.getRList()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.queryObj.pagesize = val
      this.getRList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.queryObj.page = val
      this.getRList()
    },
    async getCompany() {
      console.log(this.$store.getters.userInfo.companyId, 77777)
      const res = await getCompanyInfo(this.$store.getters.userInfo.companyId)
      this.form = res
    },
    //  获取角色列表
    async getRList() {
      const {
        total,
        rows
      } = await getRoleList(this.queryObj)
      this.tableData = rows
      this.total = total
    },
    //  删除角色
    async delRole(id) {
      await deleteRole(id)
      this.getRList()
    },
    //  编辑角色  修改角色  +   添加角色按钮
    showDia(params, row) {
      /*
			1-显示对话框
			2-获取当前角色的数据 并显示在对话框中
			3-问题？  需要知道到底是点击添加按钮显示对话框还是修改按钮显示的对话框
			 */
      this.diaBox = params
      this.dialogFormVisible = true
      if (params === 'edit') {
        this.formAdd = row
      }
    },
    //  点击修改对话框中的确认按钮 +  添加中的确认按钮
    async roleHandle() {
      const {
        name,
        description
      } = this.formAdd
      //  发送请求
      if (name && description) {
        if (this.diaBox === 'edit') {
          await updateRole(this.formAdd)
        } else {
          await addRole(this.formAdd)
        }

        this.dialogFormVisible = false
        this.getRList()
        this.close()
      }
    },
    //  关闭对话框
    close() {
      this.formAdd = {
        name: '',
        description: ''
      }
    },

    /* 分配权限按钮 */
    setRights(row) {
      this.defaultCheckedKeys = []
      this.title = row.name
      this.rightParamsObj.id = row.id //  获取角色id

      this.getRights()//  获取所有的权限
      this.getRoleById(row.id)// 获取当前角色所拥有的权限
      this.dialogVisibleRight = true
    },
    //  获取当前角色所拥有的权限
    async getRoleById(id) {
      const res = await getRoleDetail(id)
      console.log(res, 433)
      this.defaultCheckedKeys = res.permIds
      // this.dialogVisibleRight = true
    },
    //  获取所有的权限
    async getRights() {
      //  获取所有的权限列表
      const res = await getPermissionList(this.rightObj)
      console.log(res, 556677)
      this.data = TreeTool(res, 'pid', 'id')
    },
    //  点击修改对话框中的确认按钮
    async assignRightsHandle() {
      /*
			1-获取所有选中的id+角色id
			2-发送请求
			 */
      this.rightParamsObj.permIds = this.$refs.tree.getCheckedKeys() // 获取所有的权限id集合

      // console.log(this.$refs.tree.getCheckedKeys(), 888999)
      const res = await assignPerm(this.rightParamsObj)
      this.dialogVisibleRight = false
      this.rightParamsObj = {
        id: '',
        permIds: []
      }
    }
  }
}

</script>

<style lang="scss" scoped>
  .el-tabs {
    .el-form {
      width: 50%;
      margin-left: 100px;
    }
  }

</style>
